<template>
  <div v-if="parts.length > 1" class="video-part">
    <div class="part-list">
      <div
        class="part-item"
        v-for="item in parts"
        :key="'p' + item.page"
        :class="{ active: currentEp === item.cid }"
        @click="handleEpisode(item)"
      >
        <span>{{ item.part }}</span>
      </div>
    </div>
    <span class="btn" @click="handlePopup"><i class="fa fa-dropdown"></i></span>
    <van-popup class="vpopup" ref="popRef">
      <template #title>
        <span>分集({{ parts.length }})</span>
      </template>
      <div class="part-list">
        <div
          class="part-item"
          v-for="item in parts"
          :key="'pp' + item.page"
          :class="{ active: currentEp === item.cid }"
          @click="handleEpisode(item)"
        >
          <span>{{ item.part }}</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { reactive, computed, toRefs } from 'vue'
import VanPopup from '@/components/Popup'
export default {
  name: 'VideoEpisode',
  emits: ['select'],
  components: {
    VanPopup,
  },
  props: {
    detailData: {
      type: Object,
      required: true
    }
  },
  setup(props, { emit }) {
    const params = reactive({
      popRef: null,
      currentEp: 0,
      parts: computed(() => props.detailData?.pages ?? [])
    })
    const handleEpisode = (episode) => {
      const { cid } = episode
      params.currentEp = cid
      params.popRef.hide()
      emit("select", episode)
    }
    const handlePopup = () => {
      params.popRef.show()
    }

    params.currentEp = props.detailData?.cid ?? 0
    
    return {
      ...toRefs(params),
      handlePopup,
      handleEpisode
    }
  }
}
</script>

<style lang="scss" scoped>
.video-part {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  @include border1px(#e7e7e7);
}
.part-list {
  white-space: nowrap;
  width: 365px;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.part-item {
  @include border1px(#ccc, 1px, 4px);
  color: $color-text-primary;
  font-size: 12px;
  padding: 5px 9px;
  box-sizing: border-box;
  margin-right: 8px;
  span {
    display: block;
    width: 112px;
    height: 34px;
    line-height: 17px;
    white-space: normal;
    word-break: break-all;
    overflow: hidden;
  }
  &.active {
    color: $theme-color;
    &::after {
      border-color: $theme-color;
    }
  }
}
.vpopup {
  .part-list {
    width: auto;
    flex-wrap: wrap;
    align-items: baseline;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 316px;
    justify-content: space-between;
  }
  .part-item {
    height: 34px;
    padding: 16px 11px;
    background-color: #fff;
    box-sizing: content-box;
    margin-right: 0;
    margin-bottom: 12px;
    span {
      width: 139px;
    }
  }
}
@media screen and (orientation: portrait) {
  .vpopup {
    top: 255px;
  }
}
</style>